<template>
  <!--中压用户tree -->
  <div class="tree-container">
    <div class="tree-bar">
      <el-tree
      show-checkbox
      :check-strictly = "true"
      :default-checked-keys="defaultCheckedKeys"
      @check-change="getCheckedKeys"
        :data="treeData"
        :props="defaultProps"
        :highlight-current="true"
        :default-expanded-keys="[this.label]"
        node-key="label"
        ref="treeBox"
        class="elTree"
        lazy
        :load="loadNode"
      ></el-tree>
    </div>
  </div>
</template>

<script>
import { getTree } from "@/api/dmgl/dwbm.js";
import { mapGetters } from "vuex";
export default {
  
  data() {
    return {
      defaultCheckedKeys:[],
      treeData: [], // 分类树data
      defaultProps: {
        label: "label",
        children: "child",
        isLeaf: "leaf"
      },
      label: "",
      
    };
  },
  computed: {
    ...mapGetters(["czdwinfo"])
  },
  inject: ["reload"],
  watch: {
    czdwinfo(newVal, oldVal) {
      this.reload();
    }
  },
  components: {},
  created() {},
  mounted() {
  },
  methods: {
  getCheckedKeys(){
  let array = this.$refs.treeBox.getCheckedNodes()
  console.log(array,"选中的节点")
  this.$emit("getCheckedKeys", array);
  },
    /**树的懒加载 */
    loadNode(node, resolve) {
      if (node.level === 0) {
        this.getTreeLevel(resolve);
      } else if (node.level >= 1) {
        this.getNextTree(node, resolve);
      }
    },
  
    /**获取一级节点数据 */
    getTreeLevel(resolve) {
      const that = this;
      let czdwinfo = null;
      if (typeof that.czdwinfo == "string") {
        czdwinfo = JSON.parse(that.czdwinfo);
      } else {
        czdwinfo = that.czdwinfo;
      }
      let reqData = {
        dwbm: czdwinfo.dwbm,
        root: "1"
      };
      getTree(reqData).then(res => {
        if (res.code === 0) {
          that.label = res.data[0].label;
          that.treeData = res.data;
          return resolve(res.data);
        } else {
          that.$message.error(res.message);
        }
      });
    },
    /**获取下级节点数据 */
    async getNextTree(node, resolve) {
      let reqData = {
        dwbm: node.data.id,
        root: "0"
      };
      let res = await getTree(reqData);
      if (res.code === 0) {
        return resolve(res.data);
      } else {
        this.$message.error(res.message);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
label {
  font-weight: 400 !important;
}
.tree-container {
  height: 100%;
}
.treeWrapper {
  height: calc(100% - 25px);
}
.treeWrapper {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.tree-bar {
  height: 100%;
  width: 100%;
}
.elTree {
  width: 100%;
  height: 100%;
  overflow: auto;
}
/deep/ .el-tree > .el-tree-node {
  min-width: 100%;
  display: inline-block;
}
</style>
